<template>
  <div class="addTopic">
	  	<div class="title">
	  		<h1 >新建专题
				<el-button @click="resetForm()">返回</el-button>
	  		</h1>

	  	</div>
	  	<!-- 新建专题 -->
		<div  class="layout">
			<el-form style="width:40rem"  :model="form" ref="formTopic" :rules="rules" label-width="130px" >
			  <el-form-item label="是否展示在首页:">
			    <el-radio-group v-model="form.home">
			      <el-radio  label="0">否</el-radio>
			      <el-radio  label="1">是</el-radio>
			  </el-radio-group>
			  </el-form-item>
			  <el-form-item label="专题名称:"  prop="topicName" >
			    <el-input v-model="form.topicName" placeholder="请输入专题名称"></el-input>
			  </el-form-item>
			  <el-form-item label="监测时间:" required>
					<el-col :span="11">
						<el-form-item prop="date1">
							<el-date-picker
							style="margin-right:0"
								v-model="form.date1"
								type="datetime"
								:picker-options="pickerBeginDateafter"
								placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
       	 	<el-col class="line" :span="2">
							<div class="gang"></div>
					</el-col>
					<el-col :span="11">
						<el-form-item prop="date2">
							<el-date-picker
								v-model="form.date2"
								type="datetime"
								:picker-options="pickerBeginDateBefore"
								placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
			  </el-form-item>
			  <el-form-item label="载体类型:" style="font-size:0" prop="carrier">
			    <el-checkbox-group v-model="form.carrier" >
			      <el-checkbox class="w25" label="0" name="type" >新闻</el-checkbox>
			      <el-checkbox class="w25" label="1" name="type">论坛</el-checkbox>
			      <el-checkbox class="w25" label="2" name="type">微博</el-checkbox>
			      <el-checkbox class="w25" label="3" name="type">平面媒体</el-checkbox>
			      <el-checkbox class="w25" label="5" name="type">博客</el-checkbox>
			      <el-checkbox class="w25" label="6" name="type">贴吧</el-checkbox>
			      <el-checkbox class="w25" label="7" name="type">其它</el-checkbox>
			      <el-checkbox class="w25" label="9" name="type">twitter</el-checkbox>
			      <el-checkbox class="w25" label="10" name="type">微信</el-checkbox>
			    </el-checkbox-group>
			  </el-form-item>
			 	<el-form-item label="监测范围:">
				    <el-radio-group v-model="form.scope">
				      <el-radio  label='-1'>全部</el-radio>
				      <el-radio  label="2">全国</el-radio>
				      <el-radio  label="0">本地</el-radio>
				      <el-radio  label="1">境外</el-radio>
				  	</el-radio-group>
				</el-form-item>
			   <el-form-item label="地域词:" prop="distKeyword">
			    <el-input v-model="form.distKeyword" placeholder="输入本地区的地域词,多个词按空格分开"></el-input>
			  </el-form-item>
			   <el-form-item label="主体词:" prop="nameKeyword">
			    <el-input v-model="form.nameKeyword" placeholder="输入本地区所关注的主题词,包括机构名和人名"></el-input>
			  </el-form-item>
				<el-form-item label="事件词:">
			    <el-input v-model="form.eventKeyword" placeholder="输入关注的主体上发生的事件词"></el-input>
			  </el-form-item>
			  <el-form-item label="排除关键词:">
			    <el-input v-model="form.excludeKeyword" placeholder="输入关注的主体上发生的事件词"></el-input>
			  </el-form-item>
			  <el-form-item class="put">
			    <el-button type="primary" @click="submitForm('formTopic')">保存</el-button>
			    <el-button @click="resetForm()">取消</el-button>
			  </el-form-item>
			</el-form>
		</div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'addTopic',
  data() {
      return {
        form:{
					home:'0',
					topicName:'',
					carrier:['0','1','2','3','5','6','7','9','10'],
					scope:'-1',
					date1:'',
					date2:'',
					distKeyword:'',
					nameKeyword:'',
					eventKeyword:'',
					excludeKeyword:''
				},
				pickerBeginDateBefore: {
					disabledDate: (time) => {
							let beginDateVal = this.form.date1;
							if (beginDateVal) {
								let t = (time.getTime() < beginDateVal)||( time.getTime() > moment(beginDateVal).add(30,'days').valueOf())
								return t
							}
					}
				},
				pickerBeginDateafter: {
					disabledDate: (time) => {
							let afterDateVal = this.form.date2;
							if (afterDateVal) {
								let t = (time.getTime() > afterDateVal)||( time.getTime() <	moment(afterDateVal).subtract(30,'days').valueOf())
								return t
							}
					}
				},
				rules: {
					topicName: [
						{ required: true, message: '请输入专题名称', trigger: 'blur' },
						{ min: 0, max: 10, message: '长度在 10 个字符内', trigger: 'blur' }
					],
					distKeyword: [
						{ required: true, message: '请请输入地域词', trigger: 'blur' }
					],
					date1: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
					carrier: [
						{ type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
					],
					nameKeyword: [
						{ required: true, message: '请输入主题词', trigger: 'change' }
					],
				}
				}
    },
    methods: {
    	submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveTopic()
          } else {
            return false;
          }
        });
      },
      async saveTopic(){
				let old = ['0','1','2','3','5','6','7','9','10']
				let carrier = JSON.stringify(this.form.carrier.sort())==JSON.stringify(old.sort())?-1:this.form.carrier.join(',')
      	let res = await this.$http.post('/vrv-monitor-platform-web/topic/add',{
      		home:this.form.home,//是否显示
      		topicName:this.form.topicName.trim(),//专题名称
      		monitorStartTime:this.form.date1,//开始时间
      		monitorEndTime:this.form.date2,//结束时间
      		carrier:carrier,//载体类型
      		scope:this.form.scope,//监测范围
      		distKeyword:this.form.distKeyword.trim(),//地域词
      		nameKeyword:this.form.nameKeyword.trim(),//主体词
      		eventKeyword:this.form.eventKeyword.trim(),//事件词
      		excludeKeyword:this.form.excludeKeyword.trim(),//排除关键词
      	})
  			if (res.body.success==true) {
					this.$message('创建成功');
					this.$router.push('/topic');
  			}else{
  				this.$message(res.body.message);
  			}
      },
      resetForm:function() {
      	window.close()
      }
    }
  

}
</script>
<style scoped>
	.title {
		padding: 1.88rem;
		padding-bottom: 1.3rem;
	}
	.title h1{
		border-bottom: 1px solid #dcdcdc;
		padding-bottom: 0.85rem;
		font-size: 1.3rem;
		color: #555;
	}
	.title h1 button{
		padding: 0;
		width: 5rem;
		height: 2.2rem;
		line-height: 2.2rem;
		float: right;
		transform:translateY(-.5rem);
	}
	.newbuild{
		display: inline-block;
		margin-bottom: 2.8rem;
		width: 16.25rem;
		height: 22.5rem;
		border-radius: 5px;
		border:1px solid #dcdcdc;
		background: #fff;
		overflow: hidden;
	}
	.bg{
		position: relative;
		height: 9.5rem;
		background-color:#eeeeee;
		text-align: center;
	}
	.bg img{
		display: inline-block;
		margin-top: 7rem;
		cursor: pointer;
	}
	.evens {
		padding: 3.125rem 3.75rem;
	}
	.layout{
		display: flex;
	}
	.evens .item{
		flex:1;
	}
	.chose{
		width: 100%;
		margin-top: 3.125rem;
		text-align: center;
	}
	.chose button:first-child{
		margin-right: 6.25rem;
	}
	.chose button{
		padding: 0.625rem 1.875rem;
	}
	.el-form{
		margin: 0 auto;
	}
	.el-date-editor{
		width: 100% !important;
	}
	.gang{
		float: left;
		width: 14px;
    height: 3px;
    background: #898989;
    margin-left: 13px;
    margin-top: 15px;
	}
	.put button{
		width: 7rem;
	}
	.put button:first-child{
		margin-right: 1rem;
	}
	.w25{
		width: 24%;
		margin-left: 0!important;
	}

</style>
